<template>
  <div id="head_wrapper">
    <div id="s_fm" class="s_form s_form_login ">
      <div class="s_form_wrapper soutu-env-nomac soutu-env-newindex" id="s_form_wrapper">
        <div class="s-p-top" id="lg">
          <img id="s_lg_img" class="s_lg_img_gold_show"
               src="https://pec-1300659502.cos.ap-guangzhou.myqcloud.com/pecLogo.png" width="270" height="129"
               onerror="this.src='https://pec-1300659502.cos.ap-guangzhou.myqcloud.com/pecLogo.png';this.onerror=null;"
               usemap="#mp">
        </div>
        <Form ref="formInline">
          <FormItem>
            <Input v-model="searchForm.searchWord" search enter-button @on-change="changeKeyWord"/>
          </FormItem>
        </Form>
        <div class="bdsug bdsug-new bdsugbg">
          <ul>
            <li v-for="(item,index) in keyWordList" :key="index" class="bdsug-overflow" @click="clickSearch(item)">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getSuggest } from '@/api/userApi'

  export default {
    name: 'Search',
    data () {
      return {
        keyWordList: [],
        searchForm: {
          searchWord: ''
        }
      }
    },
    methods: {
      changeKeyWord () {
        if (this.searchForm.searchWord.length === 0) {
          this.keyWordList = []
          return
        }
        getSuggest(this.searchForm.searchWord).then(response => {
          if (response.code === 200) {
            this.keyWordList = []
            this.keyWordList = response.data
          }
        })
      },
      clickSearch(keyword){
        console.log(keyword)
        this.$router.push({
          path: '/search/s/result',
          query: {
            keyword: keyword,
            idx: 1
          }
        })
      }
    }
  }
</script>

<style scoped>
  #head_wrapper {
    position: relative;
    height: 40%;
    min-height: 314px;
    max-height: 510px;
    width: 974px;
    margin: 0 auto;
  }

  #head_wrapper .s_form {
    width: 654px;
    height: 100%;
    margin: 0 auto;
    text-align: left;
    z-index: 100;
  }

  .s_form_wrapper {
    height: 100%;
  }

  #head_wrapper .s-p-top {
    height: 60%;
    min-height: 185px;
    max-height: 310px;
    position: relative;
    z-index: 0;
    text-align: center;
  }

  #head_wrapper #s_lg_img, #head_wrapper #s_lg_img_aging, #head_wrapper #s_lg_img_new {
    bottom: 15px !important;
  }

  #s_lg_img, #s_lg_img_aging, #s_lg_img_new {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -135px;
  }

  img {
    border: 0;
  }

  .bdsug-new {
    width: 590px;
    top: 31px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #abb7e5 !important;
    border-top: 0 !important;
    box-shadow: none;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    z-index: 1;
  }

  .bdsug-new ul {
    margin: 7px 14px 0;
    padding: 8px 0 7px;
    background: 0 0;
    border-top: 2px solid #f5f5f6;
  }

  .bdsug li {
    width: 580px;
    color: #000;
    font: 14px arial;
    line-height: 22px;
    padding: 0 8px;
    position: relative;
    cursor: default;
  }

  .bdsug-overflow {
    margin-top: 5px;
  }

  .bdsug-overflow:hover {
    background-color: rgba(211, 242, 252, 0.91);
    cursor: pointer;
  }

  .wrapper_new #form .bdsug-new {
    width: 590px;
    top: 31px;
    border-radius: 0 0 10px 10px;
    border: 2px solid #4e71f2 !important;
    border-top: 0 !important;
    box-shadow: none;
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    z-index: 1;
  }

  .bdsug {
    z-index: 1;
    width: 605px;
    background: #fff;
    border: 1px solid #ccc;
    _overflow: hidden;
    box-shadow: 1px 1px 3px #ededed;
    -webkit-box-shadow: 1px 1px 3px #ededed;
    -moz-box-shadow: 1px 1px 3px #ededed;
    -o-box-shadow: 1px 1px 3px #ededed;
    margin-top: -27px;
  }

  p, form, ol, ul, li, dl, dt, dd, h3 {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
</style>

<style>

</style>
